<template>
	<view class="" style="width: 100vw;height: 100vh">
		<!-- <view  style="min-height: 100vh">
			<image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
		<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">

				<hx-navbar title="排行榜" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
					transparent="auto"></hx-navbar>
				<view class="interior" style="min-height: 100vh;">	
				<!--  :style="background"  -->			
					<image v-if="ktheme == 'black'" class="bg-top" src="/static/user/rank/trophyBackground" mode="aspectFit"></image>
					
				<view class="banner" :style="{'padding': (ktheme != 'purple' ? 'padding: 20rpx 0':'')}">
					<image src="/static/user/rank_banner.jpg" mode="" class="banner_img"></image>
				</view>
				<view class="container">
					<view class="ph" :style="phStyle">
						<view v-for="(item, index) in tabList">
							<view class="paihang" :class="[ktheme != 'purple' ? {selBlack:index == ifrank}:{sel:index == ifrank}, ktheme != 'purple' ? {nselBlack:index != ifrank}:{nsel:index != ifrank}]"
								:style="[selStyle]" :key="index" @click="rankClick(index,item.id)">
								<view>
									<!-- 	<text v-if="item.name==='拉新排行榜' && ifrank===2" style="color: aliceblue;">{{item.name}}11
									</text> -->
									<text>{{item.name}} </text>
								</view>
							</view>
						</view>
					</view>
						<view v-if="ktheme !='black' && ktheme !='' || ifrank !=1 "  class="mechanism" style="margin-bottom: 40rpx;">
							<text @click="mechanismClick()" :style = "rulesStyle">查看奖励规则</text>
						</view>
						<!-- 分销排行榜 -->
						<view class="rank_list" v-if='ifrank===1'>
							<view class="">
								<view :class="[ktheme != 'purple'?'tab_rankblack':'tab_rank']">
									<view class="tab_shuzi" v-for="(item, index) in tabDistributionLsit">
										<view v-if="ifdistrrank===0" @click="tabDistriClick(index)"
											:class="[{distrsel:index == ifdistrrank},{ distrnsel:index != ifdistrrank}]">
											<view class="">
												{{item.name}}
											</view>
										</view>
										
										<view v-if="ifdistrrank===1" @click="tabDistriClick(index)"
											:class="[{distrsel2:index == ifdistrrank},{ distrnsel2:index != ifdistrrank}]">
											<view class="">
												{{item.name}}
											</view>
										</view>
									</view>
								</view>
								<view v-if="ktheme != 'purple' && ifrank ==1 "  class="mechanism" style="margin-bottom: 20rpx;margin-top: 20rpx;">
									<text @click="mechanismClick()" :style = "rulesStyle">查看奖励规则</text>
								</view>
								<!-- 二级切换数字 我的成绩 -->
								<view v-if="ifdistrrank===0" class="my_rank" :style="myRankStyle">
									<image v-if="ktheme != 'purple'" class="myGrades" src="/static/user/rank/myGrades.png"></image>
									<view v-else class="my_rank_title color-o">
										我的
										成绩
									</view>
									<view class="rank_user">
										<image class="user_head_black" v-if="mydistriInfo.avatar && mydistriInfo.avatar.includes('http')" :src="mydistriInfo.avatar" @error="avatarDefaultImage()" mode="aspectFill"></image>
										<image class="user_head_black" v-if="!mydistriInfo.avatar" src="@/static/logo.png" mode="aspectFill"></image>
										<image class="user_head_black" v-if="(mydistriInfo.avatar && !mydistriInfo.avatar.includes('http'))" src="@/static/logo.png"  mode="aspectFill"></image>
										{{mydistriInfo.username}}
									</view>							
									<view class="my_rank_info" :style="rankInfoStyle">
										<text v-if="mydistriInfo.sort">第{{mydistriInfo.sort}}名</text>
										<text v-else>{{ktheme != 'purple' ? '暂未上榜':'未上榜'}}</text>
										<!-- 	<text style="color: #9e9e9e;padding: 0 20rpx 0 4rpx;">丨</text>
										<text style="color: #FE005A;">{{mydistriInfo.num}}</text> -->
									</view>
								</view>
								<!-- 二级切换卢德堡商品 我的成绩-->
								<view v-if="ifdistrrank===1" class="my_rank" :style="myRankStyle">
									<image v-if="ktheme != 'purple'" class="myGrades" src="/static/user/rank/myGrades.png"></image>
									<view v-else class="my_rank_title color-o">
										我的
										成绩
									</view>
									<view class="rank_user">
										<image :src="myInfo.avatar" mode="aspectFill" :class="ktheme != 'purple'?'user_head_black':'user_head'"></image>
										{{myInfo.nickname}}
									</view>
									<view class="my_rank_info" :style="rankInfoStyle">
										<text v-if="myInfo.ranking">第{{myInfo.ranking}}名</text>
										<text v-else>{{ktheme != 'purple' ? '暂未上榜':'未上榜'}}</text>
										<text style="color: #9e9e9e;padding: 0 20rpx 0 4rpx;">丨</text>
										<text style="color: #FE005A;">{{myInfo.num}}</text>
									</view>
								</view>
										
							</view>
										
							<!-- 二级切换数字 排行信息 -->
							<view v-if="ifdistrrank===0" class="list" :style="listStyle">
								<view class=""  :style="{'width':'100%','border-bottom': (ktheme != 'purple' ? '':'1rpx solid #D1D1D1')}">
									<view class="rank_item" :style="{'border-bottom': '0','color': (ktheme != 'purple' ? '#fff':'#000')}">
										<view class="" :style="{'width': (ktheme != 'purple' ? '100rpx':'80rpx'),'text-align':'center'}">
											排名
										</view>
										<view class="rank_name"  style="justify-content: center;">
											用户昵称
										</view>
										<view class="rank_sp_name" style="justify-content: center;">
											销售商品
										</view>
										<view class="invite_num" style="justify-content: center;">
											销售奖励
										</view>
									</view>
									<view :class="[ktheme != 'purple'?'rank_item_black':'rank_item']" :style="itemStyle" v-for="(item, index) in dataList" :key="index">
										<view  class="rank_num" :style="{'color': (ktheme != 'purple' ? '#fff':'#000')}">
											<view v-if="ktheme != 'purple'" style="margin-left: -40%;">
												<image  :src="'/static/user/rank/crown_'+(index+1)+'.png'" v-if="index<3" mode="widthFix" style="width: 100%;height: 100%;"> <!-- class="rank_img_black" -->
												</image>
												<block v-else style="">{{index+1}}</block>
												<!-- <block style="width: 100rpx;">{{index+1}}</block> -->
											</view>
											<view v-else>
												<image :src="'/static/user/rank_'+(index+1)+'.png'" v-if="index<3" mode="widthFix"
													class="rank_img">
												</image>
												<block v-else>{{index+1}}</block>
											</view>
										</view>
										<view class="rank_name" :style="nameStyle">
											{{item.username}}
										</view>
										<view class="rank_sp_name" :style="spnameStyle" >
											{{item.goods_name}}
										</view>
										<view class="invite_num" style="color:#FE005A;">
											{{item.goods_price}}
										</view>
									</view>
									<view class="none" style="text-align: center;" v-if='dataList.length===0'>
										<image src="@/static/without.png" style="width:550rpx;margin: 10rpx auto;" alt="" mode="widthFix"></image> 
									</view>
								</view>
							</view>
							<!-- 二级切换卢德堡商品  排行-->
							<view v-if="ifdistrrank===1" class="list">
								<view class="rank_item">
									<view class="" style="width: 60rpx;text-align: center;">
										排名
									</view>
									<view class="rank_whidth_name" style="justify-content: center;">
										用户昵称
									</view>
									<view class="invite_num">
										分销奖励
									</view>
								</view>
								<view :class="[ktheme != 'purple'?'rank_item_black':'rank_item']" v-for="(item, index) in dataList" :key="index">
									<view v-if="ktheme != 'purple'">
										<image  :src="'/static/user/rank/crown_'+(index+1)+'.png'" v-if="index<3" mode="widthFix"
											class="rank_img_black">
										</image>
										<view v-else style="width: 200rpx;">
											<block >{{index+1}}</block>
										</view>
										<!-- <block v-else >{{index+1}}</block> -->
									</view>
									<view v-else class="rank_num">
										<image :src="'/static/user/rank_'+(index+1)+'.png'" v-if="index<3" mode="widthFix"
											class="rank_img">
										</image>
										<block v-else>{{index+1}}</block>
									</view>
									<view class="rank_name">
										<image :src="item.avatar" mode="aspectFill" class="rank-name-img"></image>
										{{item.nickname}}
									</view>
									<view class="invite_num" style="color:#FE005A;">
										{{item.invite_num}}
									</view>
								</view>
								<view class="none" style="text-align: center;" v-if='dataList.length===0'>
									<image src="@/static/without.png" style="width:550rpx;margin: 10rpx auto;" alt="" mode="widthFix"></image> 
								</view>
							</view>
										
						</view>
				
				
					<!-- 拉新排行榜 -->
					<view class="rank_list" v-if='ifrank===0' :style="" >
						<view class="my_rank" style="border-radius: 20rpx;" :style="myRankStyle">
							<image v-if="ktheme != 'purple'" class="myGrades" src="/static/user/rank/myGrades.png"></image>
							<view v-else class="my_rank_title color-o">
								我的
								成绩
							</view>
							<view class="rank_user" :style="rankUserStyle">
								<image class="user_head_black" v-if="myRanInfo.avatar && myRanInfo.avatar.includes('http')" :src="myRanInfo.avatar" @error="avatarDefaultImage()" mode="aspectFill"></image>
								<image class="user_head_black" v-if="!myRanInfo.avatar" src="@/static/logo.png" mode="aspectFill"></image>
								<image class="user_head_black" v-if="(myRanInfo.avatar && !myRanInfo.avatar.includes('http'))" src="@/static/logo.png"  mode="aspectFill"></image>
								{{myRanInfo.nickname}}
							</view>
							<view class="my_rank_info" :style="rankInfoStyle">
								<text v-if="myRanInfo.sort">第{{myRanInfo.sort}}名</text>
								<text v-else>{{ktheme != 'purple' ? '暂未上榜':'未上榜'}}</text>
								<text v-if="ktheme == 'purple'" style="color: #9e9e9e;padding: 0 20rpx 0 4rpx;">丨</text>
								<text v-if="ktheme == 'purple'" style="color: #FE005A;">{{myRanInfo.inviteQuantity}}</text>
							</view>
						</view>
						<!-- 				<view class="rank_item-top cell-item-cb">
						<view class="top-box" :class="currtype==1?'on-top-box':''" @click="oncurr(1)">
							推荐用户
						</view>
						<view class="line"></view>
						<view class="top-box" :class="currtype==2?'on-top-box':''" @click="oncurr(2)">
							有效用户
						</view>
					</view> -->
						<view class="list" :style="listStyle" >
							<view class=""  :style="{'width':'100%','border-bottom': (ktheme != 'purple' ? '':'1rpx solid #D1D1D1')}">
								<view class="rank_item" :style="{'border-bottom': '0','color': (ktheme != 'purple' ? '#fff':'#000')}">
									<view class="" :style="{'width': (ktheme != 'purple' ? '100rpx':'60rpx'),'text-align':'center'}">
										排名
									</view>
									<view class="rank_name" :style="{'width': (ktheme != 'purple' ? '220rpx':'250rpx'),'justify-content':'center'}">
										用户昵称
									</view>
									<view class="invite_num" style="width: 220rpx;margin-right: -30rpx;"
										@click="youxiaoclick">
										<view class="" style="display: flex;justify-content: flex-end;align-items: center;">
											有效拉新人数<image src="/static/user//wenhao.png" style="width: 28rpx;height: 28rpx;"
												mode=""></image>
										</view>
									</view>
								</view>
								<!-- 	<view class="" v-if="ifyouxiao">
								<view class="" style="color: gray;font-size: 24rpx;text-align: right;">
									指有效注册实名用户
								</view>
							
							</view>
						 -->
							</view>
							<!-- 拉新 -->
							<view :class="[ktheme != 'purple'?'rank_item_black':'rank_item']" :style="itemStyle" v-for="(item, index) in ranDataList" :key="index">
								<view class="rank_num" :style="{'color': (ktheme != 'purple' ? '#fff':'#000'),'position': 'relative','width':'15%'}">
									<view v-if="ktheme != 'purple'" style="margin-left: -40%;">										
										<image  :src="'/static/user/rank/crown_'+(index+1)+'.png'" v-if="index<3" mode="widthFix" style="width: 100%;height: 100%;">
										</image>
										<block v-else >{{index+1}}</block>
									</view>
									<view v-else>
										<image :src="'/static/user/rank_'+(index+1)+'.png'" v-if="index<3" mode="widthFix"
											class="rank_img">
										</image>
										<block v-else>{{index+1}}</block>
									</view>								
								</view>
								<view class="rank_name"   :style="{nameStyle,'width': (ktheme != 'purple' ? '50%':'')}">
									<image :src="item.avatar" mode="aspectFill" class="rank-name-img"></image>
									{{item.nickname}}
								</view>
								<view class="invite_num"  :style="{'width':(ktheme != 'purple' ? '25%':''),'color': (ktheme != 'purple' ? '#fff':'#FE005A')}">
									{{item.inviteQuantity}}
								</view>
							</view>
							<view class="none" style="text-align: center;" v-if='ranDataList.length===0'>
								<image src="@/static/without.png" style="width:550rpx;margin: 10rpx auto;" alt="" mode="widthFix"></image> 
							</view>
						</view>
					</view>
				</view>
				<!-- <u-back-top :scroll-top="scrollTop"></u-back-top> -->
				<view class="scrollClsss" v-if="ifscroll" @click="scrollClick(0)">
					<image src="@/static/user/huojian.png" style="width: 110rpx;" mode="widthFix"></image>
				</view>
			</view>			
		</view>
		
		<!-- 版权说明弹窗 -->
		<uni-popup ref="rulePopup" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'">
			<view class="store-view" 
			:style="{'background':kbackgroundColor,color:knormalColor}"
			:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
				<text class="popup-title">奖励规则</text>
				<!-- <text class="popup-subtitle">{{rule}}</text> -->
				<scroll-view scroll-y="true" style="height: 700rpx;width:570rpx;margin: 40rpx;">
				    <rich-text :nodes="rule|formatRichText"></rich-text>
				</scroll-view>
				<!-- <text class="popup-subtitle">拉新5名开户，即可获得5份'爱辣·喔吆辣椒酱''冰与火系列'的'哈尔冰'数字版权商品初始价值5.8元/份 ，总量10w份；拉新10名开户，即可获得12份'爱辣·喔吆辣椒酱''冰与火系列'的'哈尔冰'数字版权商品初始价值5.8元/份 ，总量10w份；拉新20名开户，即可获得25份'爱辣·喔吆辣椒酱''冰与火系列'的'哈尔冰'数字版权商品初始价值5.8元/份 ，总量10w份。特此注意：'爱辣·喔吆辣椒酱''冰与火系列'的'山把火'数字版权商品初始价值9.9元/份，5w份，数量有限！</text> -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryId:'',
				tabList: [
					// {
					// 	id: 0,
					// 	name: "拉新排行榜"
					// }, {
					// 	id: 1,
					// 	name: "分销排行榜"
					// },
				],
				tabDistributionLsit: [
					// {
					// id: 1,
					// name: '数字版权艺术品'
					// }, {
					// 	id: 2,
					// 	name: '卢德堡啤酒商品'
					// },
				],
				
				ifscroll: false,
				scrollTop: 0,
				page: 1,
				ranPage: 1, //拉新
				distriPage: 1, //拉新Page: 1, //分销
				limit: 10,
				type: 1,
				// currtype: 1,
				dataList: [
					// //测试数据
					// {
					// 	username:'cs1',
					// 		goods_name:'111',
					// 		goods_price:'11',
					// },
					// {
					// 	username:'cs2',
					// 		goods_name:'222',
					// 		goods_price:'22',
					// },
					// {
					// 	username:'cs3',
					// 		goods_name:'333',
					// 		goods_price:'33',
					// },
					// {
					// 	username:'cs4',
					// 		goods_name:'444',
					// 		goods_price:'44',
					// }
				],
				list: [],
				info: {},
				myInfo: {
					avatar: '',
					num: '',
					nickname: '',
					ranking: '',
				},
				ifrank: 0, //分销 拉新
				ifdistrrank: 0, //数字 、卢德堡
				ifyouxiao: false, //有效拉新问号展示
				selStyle: {
					'--QianmenonlyBackgournd': this.$store.state.QianmenonlyBackgournd, //单个背景颜色
					'--onlyBackgournd': this.$store.state.ColorSize2, //选中颜色tab 字体颜色ColorSize2
					'--ColorSize': this.$store.state.ColorSize, // 字体颜色ColorSize
				},
				ranDataList: [], //拉新排行榜，
				distriList: [], //分销排行榜
				myRanInfo: { //拉新
					avatar: '',
					num: '',
					nickname: '',
					ranking: '',
				},
				mydistriInfo: { //分销
					avatar: '',
					num: '',
					nickname: '',
					ranking: '',
				},
				profile: {},
				rule:'',
				// rule:"拉新5名开户，即可获得5份'爱辣·喔吆辣椒酱''冰与火系列'的'哈尔冰'数字版权商品初始价值5.8元/份 ，总量10w份；拉新10名开户，即可获得12份'爱辣·喔吆辣椒酱''冰与火系列'的'哈尔冰'数字版权商品初始价值5.8元/份 ，总量10w份；拉新20名开户，即可获得25份'爱辣·喔吆辣椒酱''冰与火系列'的'哈尔冰'数字版权商品初始价值5.8元/份 ，总量10w份。特此注意：'爱辣·喔吆辣椒酱''冰与火系列'的'山把火'数字版权商品初始价值9.9元/份，5w份，数量有限！",
				
				//根据主题设置样式
				background:'',
				phStyle:'',
				paihangStyle:'',
				styleSel:'',
				styleNsel:'',
				rulesStyle:'',
				myRankStyle:'',
				userHeadStyle:'',
				rankUserStyle:'',
				rankInfoStyle:'',
				listStyle:'',
				itemStyle:'',
				nameStyle:'',
				spnameStyle:'',
				typeIndex: 0,
				isshow:false,
			}
		},
		//滑动显示火箭返回顶部
		/* onPageScroll(e) {
			if (this.scrollTop >= 200) {
				this.ifscroll = true
			} else {
				this.ifscroll = false
			}
			this.scrollTop = e.scrollTop;
		}, */
		onLoad() {
			//加载一级标题
			let data = {
				level: 1,
			}
			this.$api.rulecategory(data, res => {
				this.tabList[0] = res.data[0]
				//页面加载时需要给查询规则设置初始值(即拉新排行榜的)
				if(this.tabList.length>0){
					this.categoryId = this.tabList[0].id
				}
			});
			//	this.load(),//之前	
			this.getdistri() //分销
			this.getNewRanking() //拉新


			//根据主题设置样式
			this.btColors = this.$store.state.btColors
			if(this.ktheme != 'purple'){//黑色主题
				this.background = {backgroundImage: 'url("/static/user/rank/trophyBackground.png")','background-size':'100% 100%'}//,'margin':'0px 25px 0px 25px'
				this.myRankStyle = {backgroundImage: 'url("/static/user/rank/myrank.png")','background-size':'100% 100%'}
				this.paihangStyle = {}
				this.rankUserStyle = {'color':'#fff','font-size':'33rpx'}
				this.rankInfoStyle = {'color':'#fff','font-size': '23rpx','margin':'6px 0px 0px 0px'}
				this.selStyle = {
					'--selectColorSize':this.$store.state.selectColorSize,//字体选中颜色
				    '--selBcakborder':this.$store.state.selBcakborder,//选中背景线颜色
				    QianmenonlyBackgournd:this.$store.state.QianmenonlyBackgournd,//浅色单个背景颜色
				}
				this.rulesStyle = {'font-size':'24rpx','text-align': 'center','border-bottom':'2px solid #fff','display':'inline-block'}
				this.itemStyle = {'color':'#fff','margin':'10rpx','margin-bottom': '10px','width': '97%','backgroundImage':'url("/static/user/rank/myrank.png")','background-size':'100% 100%'}
				this.listStyle = {'border': '1rpx solid #D1C84D'}
				this.nameStyle = {'color': '#fff','flex-direction': 'column'}
				this.spnameStyle = {'color':'#fff','justify-content':'center'}
				if(this.ifdistrrank == 2){
					this.isshow==true
				}else{
					this.isshow==false
				}
			}else{
				this.myRankStyle = {'background-color': '#FAFAFA'}
				this.userHeadStyle = {'border': '1rpx solid #677EF0'}
				this.rankUserStyle = {'color':'#000'}
				this.rankInfoStyle = {'color':'#000'}
				this.phStyle = {'background-color': '#fff'}
				this.paihangStyle = {'border-radius': '50rpx'}
				this.itemStyle = {'width': '93%','border-bottom':'1rpx solid #D1D1D1'}
				this.listStyle = {'background-color': '#FAFAFA'}
				this.nameStyle = {'color': '#000'}
				this.spnameStyle = {'color':'#000'}
			}
		},
		onReachBottom() {
			// if(this.ifrank===1){
			// 	console.log("ifrank0",this.ifrank)
			// this.page++;
			// this.load();	
			// }else{
			// 	console.log("ifrank1",this.ifrank)
			// 		//this.ranPage++;
			// 	//  this.getNewRanking()
			// }

			console.log("ifrank2", this.ifrank)
		},

		onPullDownRefresh() {
			this.getdistri();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			avatarDefaultImage(){
				this.myRanInfo.avatar = '@/static/logo.png'
			},
			mechanismClick() {
				//调用规则
				let data = {
					categoryId:this.categoryId,
				}
				this.$api.rule(data, res => {
					if(res.data.length>0){
						this.rule = res.data[0].content
					}else{
						this.rule = '敬请期待...'
					}
					this.$refs.rulePopup.open()
				});
				// this.$refs.rulePopup.open()
			},
			//切换排行榜
			rankClick(val,ruleid) {
				this.ifrank = val
				this.categoryId = ruleid;
				//目前只有分销有二级标题
				// if(val == 1){
					//加载2级标题
					let data = {
						level : 2,
						parents : this.categoryId,
					}
					this.$api.rulecategory(data, res => {
						this.tabDistributionLsit = res.data
						//页面加载时需要给查询规则设置初始值(即分销排行榜下的第一个二级标题)
						if(this.tabDistributionLsit.length>0){
							this.categoryId = this.tabDistributionLsit[0].id
						}
					});
				// }
			},
			//二级切换
			tabDistriClick(val) {
				console.log("二级--", val)

				if (val === 1) {
					uni.showToast({
						title: '敬请期待...',
						icon: 'none'
					});
				}
				//	this.ifdistrrank = val
			},
			youxiaoclick() {
				uni.showToast({
					title: '指有效注册实名用户',
					icon: 'none'
				});
				//this.ifyouxiao = !this.ifyouxiao
			},

			scrollClick(val) {
				uni.pageScrollTo({
					scrollTop: val,
					duration: 1000,
				})
				this.scrollTop = val
			},
			findLoad() {
				this.page = 1;
				this.ranPage = 1; //拉新
				this.distriPage = 1;
				this.dataList = [] //分销

				this.ranDataList = [];
				this.dataList = [];
				// this.$u.debounce(() => {
				this.load();
				//刷新拉新排行
				this.getNewRanking()
			},
			getNewRanking() {
				//拉新--新
				let data = {
					page: this.ranPage,
					limit: this.limit,
					token: this.$db.get('userToken')
					// type: this.currtype
				}
				this.$api.newRanking(data, res => {
					uni.stopPullDownRefresh();
					// this.myRanInfo = res.data.my

					if (res.data.length === 0) return;
					this.ranDataList.push(...res.data.rank);
					this.myRanInfo = res.data.my;
					for (let i; i < this.ranDataList.length; i++) {
						if (this.ranDataList[i].uid == res.data.my.uid) {
							this.myRanInfo.sort = i + 1;
						}
					}
				});

			},
			//分销 distribution
			getdistri() {
				//拉新--新
				let data = {
					page: this.distriPage,
					limit: this.limit,
					type: this.type,
					token: this.$db.get('userToken')
					// type: this.currtype
				}
				this.$api.distribution(data, res => {
					uni.stopPullDownRefresh();
					console.log("res", res)
					this.mydistriInfo = res.data.my

					if (res.data.ranking_list.length === 0) return;
					this.dataList.push(...res.data.ranking_list);
				});
			},


			load() {
				let data = {
					page: this.page,
					limit: this.limit,
					// type: this.currtype
				}
				this.$api.inviteRank(data, res => {
					uni.stopPullDownRefresh();

					this.myInfo = res.data.user

					if (res.data.list.length === 0) return;
					this.List.push(...res.data.list);
				});
			}
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText (html) { //控制小程序中图片大小
			    let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
			        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
			        match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
			        match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
			        return match;
			    });
			    newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
			        match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
			        return match;
			    });
			    newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			    newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			    return newContent;
			}	
		}			
	}
</script>
<style lang="scss">
	page {
		background-color: #fff;
	}

	.mechanism {
		color: white;
		text-align: center;
		// margin-bottom: 40rpx;
		font-size: 27rpx;
	}

	.rank_list {
		width: 100%;
		padding: 0 10rpx;
		// background-color: #fff;
		margin-top: 20rpx;
		
		//切换 数字 卢德堡
		.tab_rank {
			background-color: #fafafa;
			border-radius: 50rpx 50rpx 0 0;
			font-size: 30rpx;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;

			display: flex;
			justify-content: space-between;

			.tab_shuzi {
				width: 344rpx;
			}

			//选中
			.distrsel {
				color: #000;
			}

			.distrnsel {
				color: #f0f0f0;
				background-size: 100% 100%;
				background-image: url('@/static/user/zibanck.png');
			}

			//选中2
			.distrsel2 {
				color: #000;
			}

			.distrnsel2 {
				color: #f0f0f0;
				background-size: 100% 100%;
				background-image: url('@/static/user/zibanck2.png');
			}

		}
		//黑色主题
		 .tab_rankblack{
			 margin-left: 10%;
			 width: 80%;
			 color:#fff;
			 font-size: 25rpx;
			 text-align: center;
			 // height: 40rpx;
			 line-height: 44rpx;
			 display: flex;
			 // justify-content: space-around;
			 justify-content: center;
			 // padding: 5px 8px;
			 cursor: pointer;
			 position: relative;
			 pointer-events: none;
			.tab_shuzi {
				width: 40%;
				height: 100%;
				pointer-events: auto;
			}
			&::before { /* 1 */
				// margin-top: -2rpx;
				// margin-left: 1rpx;
				display: block;
				content: '';
				border-radius: 60rpx;
				border: 2px solid transparent;
				background: linear-gradient(90deg, #D1C84D, #3FA87B) border-box; /* 2 */
				-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);  /* 3 */
				-webkit-mask-composite: xor;  /* 4 */
				mask-composite: exclude;
				position: absolute;
				width: 80%;
				height: 86%;
			}
			.distrsel {
				background:linear-gradient(#D1C84D 0%, #3FA87B 100%);
				border-radius: 80rpx;
			}
			.distrnsel {
			}
			//选中2
			.distrsel2 {
				background:linear-gradient(#D1C84D 0%, #3FA87B 100%);
				border-radius: 80rpx;
			}
			.distrnsel2 {
			}
		}
		.list {
			width: 100%;
			// background-color: #FAFAFA;
			border-radius: 20rpx;
			margin-top: 20rpx;
		}

		.rank_item:nth-last-child(1) {
			border-bottom: none;
		}

		.rank_item {
			width: 100%;
			// border-bottom: 1rpx solid #D1D1D1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 37rpx;
			height: 124rpx;
			font-size: 28rpx;
			color: #000;
			
			position: relative;
			.rank_num {
				width: 80rpx;
				text-align: center;
				font-size: 40rpx;
				color: #000;
			}

			.rank_img {
				width: 50rpx;
				height: 52rpx;
			}
			
			
			.rank_img_black {
				width: 120rpx;
				height: 140rpx;
				margin: 30px 20px 25px -15px;
			}

			.rank_sp_name {
				width: 200rpx;
				height: 40rpx;
			}

			.rank_name {
				width: 250rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				margin: 0 22rpx;

				.rank-name-img {
					width: 52rpx;
					height: 52rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}

			.invite_num {
				// width: 170rpx;
				width: 150rpx;
				text-align: center;
			}
		}
		
		//黑色主题的渐变色边框
		.rank_item_black {
			width: 100%;
			// border-bottom: 1rpx solid #D1D1D1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 37rpx;
			height: 124rpx;
			font-size: 28rpx;
			color: #000;
			position: relative;
			margin-bottom: 60rpx;
			// pointer-events: none;
			.rank_num {
				width: 80rpx;
				text-align: center;
				font-size: 40rpx;
				color: #000;
			}
		
			.rank_img {
				width: 50rpx;
				height: 52rpx;
			}
			
			
			.rank_img_black {
				width: 25%;
				height: 140rpx;
				margin: 30px 20px 25px -15px;
			}
		
			.rank_sp_name {
				width: 30%;
				height: 40rpx;
			}
			.rank_name {
				width: 30%;
				height: 40rpx;
				display: flex;
				align-items: center;
				margin: 0 22rpx;
		
				.rank-name-img {
					width: 52rpx;
					height: 52rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}
			.invite_num {
				// width: 170rpx;
				width: 15%;
				text-align: center;
				// display: flex;
				// align-items: center;
			}
		}
		.rank_item_black::before { /* 1 */
		// margin-top: -4rpx;
		margin-left: -37rpx;
		display: block;
		content: '';
		border-radius: 33rpx;
		border: 2px solid transparent;
		background: linear-gradient(to bottom, #D1C84D, #3FA87B) border-box; /* 2 */
		-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);  /* 3 */
		-webkit-mask-composite: xor;  /* 4 */
		mask-composite: exclude;
		position: absolute;
		width: 99%;
		height: 100%;
		}
	}




	.my_rank {
		width: 100%;
		height: 160rpx;
		// background-color: #FAFAFA;
		// border-radius: 20rpx;
		padding: 0 40rpx 0 55rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.my_rank_info {
			height: 40rpx;
			font-size: 28rpx;
			color: #000;
		}

		.rank_user {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #000;

			.user_head {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				border: 1rpx solid #677EF0;
				margin-right: 20rpx;
			}
			.user_head_black {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.user_head_black::before { /* 1 */
				margin-top: -1rpx;
				margin-left: -3rpx;
				content: '';
				border-radius: 50%;
				border: 2px solid transparent;
				background: linear-gradient(to bottom, #EFFB7C, #3FA87B) border-box; /* 2 */
				-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);  /* 3 */
				-webkit-mask-composite: xor;  /* 4 */
				mask-composite: exclude;
				position: absolute;
				width: 94%;
				height: 94%;
			}		
		}

		.my_rank_title {
			width: 56rpx;
			height: 72rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
		.myGrades{
			width: 90rpx;
			height: 90rpx;
			// padding: 0 0rpx 0 -65rpx;
			margin: 0 0rpx 0 -15rpx;
		}
	}

	.banner {
		width: 90%;
		margin: 20rpx auto;
		// height: 293rpx;
		// padding: 20rpx 0;

		// background: #F9F9F9;

		.banner_img {
			width: 100%;
			height: 253rpx;
			border-radius: 20rpx;

		}
	}

	.container {
		padding: 10rpx 40rpx 40rpx;
	}

	view {
		box-sizing: border-box;
	}

	.scrollClsss {
		position: fixed;
		bottom: 150rpx;
		right: -16rpx;
		z-index: 999;
		width: 120rpx;
		// height: 100rpx;

	}

	.ph {
		// background-color: #fff;
		display: flex;
		margin: auto;
		text-align: center;
		width: 260rpx;
		line-height: 60rpx;
		height: 65rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
		margin-bottom: 40rpx;
	}

	.paihang {
		width: 260rpx;
		border-radius: 50rpx;

	}

	.sel {
		// border: var(--borderSty);
		// color: var(--selectColorSize);
		// font-weight: 500;
		color: #ff4545;
		background: var(--onlyBackgournd);
		margin: 2rpx;
	}

	.nsel {
		color: var(--ColorSize);
		font-weight: 400;
	}
	.selBlack {
		color: var(--selectColorSize);
		font-weight: bold;
		position: relative;
	}
	.selBlack::after {
		display: block;
		clear: both;
		content: '';
		width: 60%;
		height: 10rpx;
		// background:var(--selBcakborder);
		background:#A3B665;
		border-radius: 100rpx;
		position: absolute;
		left: 50%;
		// bottom: 0rpx;
		transform: translateX(-50%);
		z-index: 2;
	}
	.nselBlack {
		color: #fff;
		font-weight: 400;
	}
	
	.alert-border-purple {
		box-shadow: 2rpx 2rpx 12rpx 4rpx #51515166 !important;
		box-shadow: inset 0rpx 0rpx 50rpx 0rpx rgba(254, 162, 221, 0.91) !important;
		background-color: #fff !important;
	}
	
	.alert-border-black {
		border: 1px solid #FFD38C;
	}
	.alert-border-shadow-black {
		box-shadow: inset 0rpx 0rpx 50rpx 0rpx rgba(88, 204, 123, 0.9) !important;
	}
	.store-view{
		display: flex;
		flex-direction: column;
		max-height: 1000rpx;
		margin: 0 40rpx;
		border-radius: 40rpx;
		width: 660rpx;
		.popup-title{
			width: 100%;
			margin-top: 40rpx;
			text-align: center;
		}
		.popup-subtitle{
			font-size: 28rpx;
			padding: 40rpx;
		}
	}
	
</style>